<template>
  <div class="home-view-wrapper">
    <WeatherHeader :current-weather="currentWeather"></WeatherHeader>
    <HomeViewBody>
      <WeatherDisplay
        v-if="isDataReady"
        :daily-weather-forecasts="dailyWeatherForecasts"
        :option="option"
      ></WeatherDisplay>
    </HomeViewBody>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';

import { useWeatherStore } from '@/stores/weatherStore.js';

import WeatherHeader from '@/components/WeatherHeader.vue';
import HomeViewBody from '@/components/HomeViewBody.vue';
import WeatherDisplay from '@/components/WeatherDisplay.vue';

const {
  weatherForecasts,
  dailyWeatherForecasts,
  currentWeather,
  localDayTemperatures,
  localNightTemperatures,
} = storeToRefs(useWeatherStore());
const { getLocalWeather, computeDailyWeatherForecasts, renderChartOption } = useWeatherStore();

// echarts 配置项
const option = ref({});
// 添加一个标志来控制组件的显示
const isDataReady = ref(false);

onMounted(async () => {
  await getLocalWeather();
  computeDailyWeatherForecasts(weatherForecasts.value);
  renderChartOption(option, localDayTemperatures.value, localNightTemperatures.value);
  // 当数据准备好了，设置 isDataReady 为 true
  isDataReady.value = true;
});
</script>

<style lang="scss" scoped>
.home-view-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  // max-width: 1536px;
  max-width: 100%;
  width: 100%;
  background-color: #00668a;
  margin: 0 auto;
  :deep(.icon-add) {
    display: none;
  }
}
</style>
